<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script src="js/jquery-1.10.1.js"></script>
    <script src="js/myAjax.js"></script>
</head>
<body>
    <div id="msg"></div>
    <form>
        用户名：<input type="text" name="username"/><br/>
        密码：<input type="password" name="password"/><br/>
        <input type="button" value="登陆" onclick="login()"/>
    </form>
    <script>
        // 1、事件绑定
        function login() {
            //jQuery中的serialize方法能获取input输入框内的name属性值和value属性值组成的  键值对组成的字符串
            //并且多个input输入框内的多对键值对之间用 & 符号分割  即username=“xxx”&password="123"
            //所以  此方法的返回值就能作为 要传递的参数  供服务器接收使用
            var data = $("form").serialize();
            //调用外部js文件中我们定义封装好的 发送ajax请求的“工具函数”
            myAjax("get","/ajaxday02/ajax/login",data,function (result) {
                //根据服务器响应的结果  进行局部刷新渲染
                if(result=="ok"){
                    $("form").hide();
                    $("div").html("欢迎登陆");
                }else{
                    $("div").html("用户名或密码不正确");
                }
            });

        }
    </script>
</body>
</html>